/*
 * @Description: 弹出评价组件
 * @Author: buwei.huang
 * @Date: 2019-07-29 14:42:38
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-26 16:20:14
 */

<template>
  <mask-module
    ref="mask"
    class="flex-h flex-vc flex-hc"
    :isClickBgToHide="false"
  >
    <div class="Appraise_wrap">
      <div class="Appraise_content Appraise_font">
        <span>请对我们的服务做出评价</span>
        <!-- 星星组件 -->
        <appraise-item
          :inStarNum="inStarNum"
          @inStars="inStars"
        />
        <div class="appraiseText_font">{{appraiseText}}</div>
      </div>
      <div class="Appraise_btns flex-h">
        <button
          class="Appraise_btns_left Appraise_font"
          @click="clickCancel"
        >以后再说</button>
        <button
          class="Appraise_btns_right Appraise_font baseColorWithActive"
          @click="clickConfirm"
        >{{inStarsBtnText}}</button>
      </div>
    </div>
  </mask-module>
</template>
<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
import AppraiseItem from './AppraiseItem'
import { onSubmitAppraise } from '../api/api.js'
import { getLocalStorageData } from '@/utils/LocalStorageUtils'
export default {
  components: {
    'mask-module': AnimatedDialog,
    'appraise-item': AppraiseItem
  },
  props: {
    dataInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      inStarNum: null,
      inStarsBtnText: '立即评价',
      EVALUATION_MAP: {
        '1': '不想坐第二次',
        '2': '不想坐第二次',
        '3': '勉勉强强',
        '4': '勉勉强强',
        '5': '还想再来'
      }
    }
  },
  computed: {
    mask() {
      return this.$refs.mask
    },
    // 评价文案
    appraiseText() {
      return this.inStarNum ? this.EVALUATION_MAP[this.inStarNum + ''] : ''
    }
  },
  watch: {
    inStarNum(val) {
      console.log(val)
    }
  },
  mounted() {
    let body = getLocalStorageData('BCglobals', 'EVALUATION_MAP')
    console.log(body)
    if (body) {
      this.EVALUATION_MAP = body
    }
  },
  methods: {
    clickConfirm() {
      // console.log(this.inStarNum)
      let msg
      if (this.inStarNum) {
        try {
          onSubmitAppraise(this.inStarNum).then(res => {
            msg = '感谢您对我们的支持'
            this.$toastMsg(msg)
            this.$emit('isHideBtn')
          }).catch(err => {
            console.dir(err)
            msg = '评价失败，请稍后重试'
            this.$toastMsg(msg)
          })
        } catch (err) {
          console.dir(err)
          msg = '评价失败，请稍后重试'
          this.$toastMsg(msg)
        } finally {
          this.mask.hide()
        }
      } else {
        msg = '您还没有对我们的服务打分'
        this.$toastMsg(msg)
      }
    },
    clickCancel() {
      this.mask.hide()
    },
    inStars(num) {
      this.inStarNum = num
    }
  }
}
</script>
<style>
.Appraise_wrap {
  width: 560px;
  height: 328px;
  background-color: #fff;
  border-radius: 16px;
  padding-top: 32px;
  box-sizing: border-box;
}
.Appraise_font {
  font-size: 18px; /*no*/
  line-height: 44px;
}
.Appraise_content {
  text-align: center;
  padding-bottom: 16px;
}
.Appraise_btns {
  height: 86px;
  border-top: 1px solid rgb(0, 0, 80, 0.3);
  box-sizing: border-box;
}
.Appraise_btns > button {
  width: 50%;
  border: none;
  background-color: #fff;
}
.Appraise_btns .Appraise_btns_left {
  color: #333333;
  border-bottom-left-radius: 16px;
}
.Appraise_btns .Appraise_btns_right {
  border-bottom-right-radius: 16px;
}
.Appraise_btns > span {
  display: inline-block;
  height: 100%;
  border-left: 1px solid rgb(0, 0, 80, 0.3);
}
.appraiseText_font {
  height: 44px;
  font-size: 14px; /*no*/
  color: #666666;
}
</style>
